<template>
	<div class="post_card_container flex_column">
		<img class="card_info_img"
			 :src="item.picUrl"
			 alt="">
		<div class="info">
			<div class="info_title">{{ item.title }}</div>
			<div class="info_content flex">
				<div class="left flex">
					<img :src="item.avatar" alt="">
					<div class="nickname">{{ item["nickname"] }}nicknamenicknamenicknamenickname</div>
				</div>
				<div class="right flex">
					<van-icon name="eye-o"/>
					<div class="count_look">{{ item["readCount"] }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
export default {
    name: "PostCard"
}
</script>

<script setup lang="ts">
// region >>> 相关依赖

// endregion

// region >>> 相关数据
const props = defineProps<{ item: any }>()
// endregion

// region >>> 生命周期函数
// endregion

// region >>> 事件回调
// endregion

// region >>> 自定义功能函数
// endregion
</script>

<style lang="less" scoped>

.flex {
  display: flex;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.van-icon {
  font-size: 16px;
}

.post_card_container {
  background: #fff;
  width: 172.5px;
  margin: 5px 0;
  border-radius: 10px;

  .card_info_img {
    width: 100%;
    object-fit: fill;
    border-radius: 10px 10px 0 0;
  }

  .info {

    &_title {
      //height: 29px;
      //line-height: 29px;
      padding: 9px 8px 0;
      font-size: 14px;

      /*多行文本溢出显示省略号*/
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &_content {
      height: 44.5px;
      padding: 8.5px 8px 12px;
      box-sizing: border-box;
      justify-content: space-between;

      .left {
        color: #7f7f7f;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }

        div.nickname {
          font-size: 12px;
          margin-left: 4px;
					width: 68px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .right {
        align-items: center;

        .count_look {
          font-size: 12px;
          margin-left: 1px;
          color: #7f7f7f;

        }
      }
    }
  }
}
</style>